<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="main" style="width: 20rem;height: 10rem;margin-top: 50px;"></div>
		<script src="js/flexible.js"></script>
		<script src="js/echarts新版.js"></script>
		<script>
			var chartDom = document.getElementsByClassName('main')[0];
			var myChart = echarts.init(chartDom);
			var option;
			var div=document.getElementsByTagName('div')[0]
			myChart.showLoading();
			const data = {
			  name: 'flare',
			  children: [
			    {
			      name: 'data',
			      children: [
			        {
			          name: 'converters',
			          children: [
			            { name: 'Converters', value: 721 },
			            { name: 'DelimitedTextConverter', value: 4294 }
			          ]
			        },
			        {
			          name: 'DataUtil',
			          value: 3322
			        }
			      ]
			    },
			    {
			      name: 'display',
			      children: [
			        { name: 'DirtySprite', value: 8833 },
			        { name: 'LineSprite', value: 1732 },
			        { name: 'RectSprite', value: 3623 }
			      ]
			    },
			    {
			      name: 'flex',
			      children: [{ name: 'FlareVis', value: 4116 }]
			    },
			    {
			      name: 'query',
			      children: [
			        { name: 'AggregateExpression', value: 1616 },
			        { name: 'And', value: 1027 },
			        { name: 'Arithmetic', value: 3891 },
			        { name: 'Average', value: 891 },
			        { name: 'BinaryExpression', value: 2893 },
			        { name: 'Fn', value: 3240 },
			        { name: 'If', value: 2732 },
			        { name: 'IsA', value: 2039 },
			        { name: 'Literal', value: 1214 },
			        { name: 'Match', value: 3748 },
			        { name: 'Maximum', value: 843 },
			        {
			          name: 'methods',
			          children: [
			            { name: 'add', value: 593 },
			            { name: 'and', value: 330 },
			            { name: 'average', value: 287 },
			            { name: 'count', value: 277 },
			            { name: 'distinct', value: 292 },
			            { name: 'div', value: 595 },
			            { name: 'eq', value: 594 },
			            { name: 'fn', value: 460 },
			            { name: 'gt', value: 603 },
			            { name: 'gte', value: 625 },
			            { name: 'iff', value: 748 },
			            { name: 'isa', value: 461 },
			            { name: 'lt', value: 597 },
			            { name: 'lte', value: 619 },
			            { name: 'max', value: 283 },
			            { name: 'min', value: 283 },
			            { name: 'mod', value: 591 },
			            { name: 'mul', value: 603 },
			            { name: 'neq', value: 599 },
			            { name: 'not', value: 386 },
			          ]
			        },
			        { name: 'Minimum', value: 843 },
			        { name: 'Not', value: 1554 },
			        { name: 'Or', value: 970 },
			        { name: 'Query', value: 13896 },
			        { name: 'Range', value: 1594 },
			        { name: 'StringUtil', value: 4130 },
			        { name: 'Sum', value: 791 },
			        { name: 'Variable', value: 1124 },
			        { name: 'Variance', value: 1876 },
			        { name: 'Xor', value: 1101 }
			      ]
			    },
			    {
			      name: 'scale',
			      children: [
			        { name: 'IScaleMap', value: 2105 },
			        { name: 'LinearScale', value: 1316 },
			        { name: 'LogScale', value: 3151 },
			        { name: 'OrdinalScale', value: 3770 },
			        { name: 'QuantileScale', value: 2435 },
			        { name: 'QuantitativeScale', value: 4839 },
			        { name: 'RootScale', value: 1756 },
			        { name: 'Scale', value: 4268 },
			        { name: 'ScaleType', value: 1821 },
			        { name: 'TimeScale', value: 5833 }
			      ]
			    }
			  ]
			};
			var data2 = {
			  name: 'flare',
			  children: [
			    {
			      name: 'flex',
			      children: [{ name: 'FlareVis', value: 4116 }]
			    },
			    {
			      name: 'scale',
			      children: [
			        { name: 'IScaleMap', value: 2105 },
			        { name: 'LinearScale', value: 1316 },
			        { name: 'LogScale', value: 3151 },
			        { name: 'OrdinalScale', value: 3770 },
			        { name: 'QuantileScale', value: 2435 },
			        { name: 'QuantitativeScale', value: 4839 },
			        { name: 'RootScale', value: 1756 },
			        { name: 'Scale', value: 4268 },
			        { name: 'ScaleType', value: 1821 },
			        { name: 'TimeScale', value: 5833 }
			      ]
			    },
			    {
			      name: 'display',
			      children: [{ name: 'DirtySprite', value: 8833 }]
			    }
			  ]
			};
			myChart.hideLoading();
			myChart.setOption(
			  (option = {
			    tooltip: {
			      // trigger: 'item',
						// 鼠标聚焦提示
			      triggerOn: 'mousemove'
			    },
			    legend: {
			      top: '2%',
			      left: '3%',
			      orient: 'vertical',
			      data: [
			        {
			          name: 'tree1',
			          icon: 'rectangle'
			        },
			        {
			          name: 'tree2',
			          icon: 'rectangle'
			        }
			      ],
			    },
			    series: [
			      {
			        type: 'tree',
			        name: 'tree1',
			        data: [data],
							// 树图与div顶部距离，调大会压缩图像大小
			        top: '5%',
							// 树图与div左侧距离，调大会移动图像
			        left: '7%',
							// 树图与div底部距离，调大会压缩图像大小
			        bottom: '2%',
			        right: '60%',
							// 树形图圆点大小
			        symbolSize: 7,
							// 默认展示3层子节点
							initialTreeDepth: 3,
							lineStyle: {
								width: 2
							},
			        label: {
								// position可以控制label上下左右，align可以控制label右侧与圆点对齐，结合可以使label在圆点左上角
			          position: 'top',
			          align: 'right'
			        },
							// 叶子节点
			        leaves: {
			          label: {
									// position可以控制label上下左右，align可以控制label左侧与圆点对齐，verticalAlign控制垂直居中，结合可以使label在圆点右边
			            position: 'right',
			            verticalAlign: 'middle',
			            align: 'left'
			          }
			        },
			        emphasis: {
								// 鼠标对准圆点时，聚焦所有子孙节点；ancestor聚焦祖先节点；relative聚焦所有子孙和祖先节点
			          focus: 'descendant'
			        },
							// 点击圆点开关子树
			        expandAndCollapse: true,
							// 初始动画的延迟，支持回调函数，类似animationDurationUpdate
			        animationDuration: 5500,
			        animationDurationUpdate:  function (idx) {
								// 数据更新动画的时长。  越往后的数据时长越大  
								return idx * 100;
							}
			      },
			      {
			        type: 'tree',
			        name: 'tree2',
			        data: [data2],
			        top: '20%',
			        left: '60%',
			        bottom: '22%',
			        right: '18%',
			        symbolSize: 7,
			        label: {
			          position: 'left',
			          verticalAlign: 'middle',
			          align: 'right'
			        },
							// 垂直图
							orient: 'vertical',
							// 直线树状图
							edgeShape: 'polyline',
							// 控制圆点与子树分叉点的位置，二者间通常存在一段距离
							edgeForkPosition: '63%',
			        leaves: {
			          label: {
			            position: 'bottom',
			            // 文本顶部相对圆点对齐
									verticalAlign: 'top',
									// label宽度
									width:1,
									// 配合width使用，超宽度时换行
									overflow:"breakAll",
			            align: 'center'
			          }
			        },
			        expandAndCollapse: true,
			        emphasis: {
			          focus: 'descendant'
			        },
			        animationDuration: 550,
			        animationDurationUpdate: 750
			      }
			    ]
			  })
			);
			option && myChart.setOption(option);
			window.addEventListener('resize',()=>{
				myChart.resize()
			})
		</script>
	</body>
</html>